<template>
  <div class="box-sex">
    <div class="title">
      <p>男女比例</p>
      <p class="bg"></p>
    </div>
    <div class="sex">
      <div class="man">
        <p class="man-text">男士</p>
        <img src="../../images/man.png" alt="" />
      </div>
      <div class="women">
        <p class="women-text">女士</p>
        <img src="../../images/woman.png" alt="" />
      </div>
    </div>
    <div ref="sexCharts" class="charts"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

const sexCharts = ref()

const grid = {
  left: 0,
  right: 10,
  top: 0,
  bottom: 0,
  containLabel: true,
}

onMounted(() => {
  const mySexCharts = echarts.init(sexCharts.value)
  // 设置配置项
  mySexCharts.setOption({
    legend: {
      selectedMode: false,
    },
    grid,
    yAxis: {
      type: 'category',
      show: false,
    },
    xAxis: {
      show: false,
    },
    series: [
      {
        // name: '男士',
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          formatter: (params) => Math.round(params.value) + '%',
        },
        emphasis: {
          focus: 'series',
        },
        data: [
          {
            value: 58,
            itemStyle: {
              color: '#007afe',
              borderRadius: [20, 0, 0, 20],
            },
          },
        ],
      },
      {
        // name: '女士',
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          formatter: (params) => Math.round(params.value) + '%',
        },
        emphasis: {
          focus: 'series',
        },
        data: [
          {
            value: 42,
            itemStyle: {
              color: '#ff4b7a',
              borderRadius: [0, 20, 20, 0],
            },
          },
        ],
      },
    ],
  })
})
</script>

<style lang="scss" scoped>
.box-sex {
  width: 100%;
  height: 100%;
  background: url('../../images/dataScreen-main-lc.png') no-repeat;
  background-size: 100% 100%;
  margin: 20px 0px;
  .title {
    margin-left: 20px;
    p {
      color: white;
      font-size: 20px;
    }
    .bg {
      width: 68px;
      height: 7px;
      background: url('../../images/dataScreen-title.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
  }
  .sex {
    display: flex;
    justify-content: center;
    .man {
      margin: 30px;
      width: 111px;
      height: 115px;
      background: url('../../images/man-bg.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      // justify-content: space-around;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      .man-text {
        color: white;
      }
    }
    .women {
      margin: 30px;
      width: 111px;
      height: 115px;
      background: url('../../images/woman-bg.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column; //主轴为 y
      justify-content: space-between; // 两端对齐
      align-items: center; // 副轴居中 x轴
      padding-bottom: 10px;
      .women-text {
        color: white;
      }
    }
  }
  .charts {
    height: 70px;
  }
}
</style>
